<template>
  <div>
    <h2>事件绑定指令</h2>

    <p>{{age}}</p>
    <!-- 事件绑定指令  v-on:事件名="处理程序"  v-on: 简写 @-->
    <!-- <button v-on:事件名="处理程序">按钮</button> -->
    <!-- <button @事件名="处理程序">按钮</button> -->


    <!-- 事件处理程序，如果代码简单，直接写道<template> 这个区域即可 -->
    <!-- 处理程序，代码只能使用vue中定义好的 data 数据 或 methods 方法 -->
    <button @click="age++">1</button>

    <!-- 事件处理程序 如果代码非常多，可以用方法 方法必须定义到  和data平级的methods中 -->
    <button @click="changeAge"></button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      age:20
    }
  },
  //methods 是储存方法的
  methods: {
    changeAge () {
      // vue中 ，找data数据，methods方法。。。。都是通过this直接找【这是vue中的语法】
      this.age--
      console.log(123);
    }
  },
}
</script>

<style>

</style>